import {
  type FC,
  createContext,
  useContext,
  useEffect,
  useState,
  useMemo
} from "react";
type MediumInfo = {
  ismobile: boolean;
  windowWdith: number;
};
const meduicontext = createContext<MediumInfo>({
  ismobile: false,
  windowWdith: 0
});
const Meduicontext: FC<{
  children: React.ReactNode;
}> = function (props) {
  const [windowWdith, setWindowWdith] = useState(document.body.clientWidth);
  useEffect(() => {
    // 监听
    window.addEventListener("resize", () =>
      setWindowWdith(document.body.clientWidth)
    );
    // 销毁
    return () => window.removeEventListener("resize", () => setWindowWdith(0));
  });
  const ismobile = useMemo(function getMedium() {
    // 获取Medium的逻辑
    const Agentinfo = navigator.userAgent;
    return /mobile/i.test(Agentinfo);
  }, []);
  return (
    <>
      <meduicontext.Provider value={{ ismobile, windowWdith }}>
        {props.children}
      </meduicontext.Provider>
    </>
  );
};
export default function useMedium() {
  const Meduinfo = useContext(meduicontext);
  return {
    Meduicontext,
    Meduinfo
  };
}
